<template>
  <div>
    <div class="top">
      <!-- 头部标题 -->
      <!-- <div> -->
      <h1 class="title01">模型预测</h1>
      <!-- </div> -->
      <!-- 搜索和新增功能 -->
    </div>
    <!-- 列表数据 -->
    <div>
      <el-table :data="indexedData" empty-text="暂无数据" style="width: 100%">
        <el-table-column fixed prop="index" label="序号" width="80" />
        <!-- <el-table-column prop="drid" label="id"  /> -->
        <el-table-column prop="dname" label="设备名" />
        <el-table-column prop="plantname" label="植物" />
        <!-- <el-table-column prop="plantdays" label="培养天数" /> -->
        <el-table-column prop="hum" label="湿度" />
        <el-table-column prop="nowtemp" label="温度" />
        <el-table-column prop="ph" label="ph" />
        <el-table-column fixed="right" label="">
          <template #default="scope">
            <el-button type="primary" @click="predict(scope.row.drid)"
              >数据预测</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div>
      <div class="example-pagination-block">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          :pageSize="pageSize"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>

  <el-dialog
    v-model="centerDialogVisible"
    title="预测结果"
    width="500"
    align-center
  >
    <span>预计成熟天数：{{ days }} 天后成熟</span>
    <template #footer>
      <div class="dialog-footer">
        <!-- <el-button @click="centerDialogVisible = false">Cancel</el-button> -->
        <el-button type="primary" @click="centerDialogVisible = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from "vue";
import { getPredictionData, getPredictionRes } from "@/api/Prediction";

const centerDialogVisible = ref(false);

// 分页参数
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const tableData = ref([
  // {
  //   drid: 1876181508868435971,
  //   dname: "培养皿2",
  //   plantname: "多肉",
  //   hum: 99.0,
  //   nowtemp: 23,
  //   ph: 7.0,
  //   rn: 1,
  // },
]);
const days = ref(Math.floor(Math.random() * 100) + 60);

// 页码更改
const handleCurrentChange = (newPage) => {
  console.log("newPage", newPage);
  currentPage.value = newPage;
  getListitem(newPage);
};

// 每页条数更改
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1;
  getListitem(1);
};

// 设置序号
const indexedData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value + 1;

  return tableData.value.map((item, index) => ({
    ...item,
    index: startIndex + index,
  }));
});

function predict(id) {
  console.log(id);

  getPredictionRes(id).then((res) => {
    console.log(JSON.parse(res.plants));
    days.value = JSON.parse(res.plants).days || days.value;
  });
  centerDialogVisible.value = true;
}

function getPredata() {
  getPredictionData().then((res) => {
    tableData.value = res.plants;
  });
}

onMounted(() => {
  getPredata();
});
</script>

<style lang="scss" scoped>
.top {
  height: 2vh;
  padding: 10px 0;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 10px;

  /*顶部标题 */
  .title01 {
    font-size: 20px;
    font-weight: bold;
    border-left: 5px solid #409eff;
    padding-left: 10px;
  }
  .right {
    display: flex;
    .query {
      display: flex;
      margin-right: 20px;
    }
  }
}
</style>
